<template>
<div class="profile-header">
	<div class="user-cover">
		<img src="http://127.0.0.1:8080/src/public/img/bg.jpg" alt="">
		<button class="Button UserCoverEditor-simpleEditButton DynamicColorButton DynamicColorButton--dark" type="button"><svg viewBox="0 0 20 16" class="Icon Icon--camera Icon--left" width="14" height="16" aria-hidden="true" style="height: 16px; width: 14px;"><title></title><g><path d="M18.094 2H15s-1-2-2-2H7C6 0 5 2 5 2H2C0 2 0 3.967 0 3.967V14c0 2 2.036 2 2.036 2H17c3 0 3-1.983 3-1.983V4c0-2-1.906-2-1.906-2zM10 12c-1.933 0-3.5-1.567-3.5-3.5S8.067 5 10 5s3.5 1.567 3.5 3.5S11.933 12 10 12zm0 1.5c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm7.5-8c-.552 0-1-.448-1-1s.448-1 1-1 1 .448 1 1-.448 1-1 1z" fill-rule="evenodd"></path></g></svg><!-- react-text: 58 -->编辑封面图片<!-- /react-text --></button>
	</div>

	<div class="user-wrapper">
		<div class="profileHeader-main">
			<div class="avatar-box" style="background-image:url(http://127.0.0.1:8080/src/public/img/avatar.jpg);">

			</div>
			<div class="content-box">
				<div class="ProfileHeader-contentHead"> 
					<span class="ProfileHeader-name">撩妹狂魔</span>
					<span class="RichText ProfileHeader-headline">计算机领域老司机</span><!-- react-empty: 82 -->
				</div>
				<div class="ProfileHeader-contentBody" style="height: 52px;">
				<span>
					<div class="ProfileHeader-info"><div class="ProfileHeader-infoItem">
						<div class="ProfileHeader-iconWrapper">
								<svg viewBox="0 0 20 18" class="Icon Icon--company" width="13" height="16" aria-hidden="true" style="height: 16px; width: 13px;"><title></title><g><path d="M15 3.998v-2C14.86.89 13.98 0 13 0H7C5.822 0 5.016.89 5 2v2l-3.02-.002c-1.098 0-1.97.89-1.97 2L0 16c0 1.11.882 2 1.98 2h16.033c1.1 0 1.98-.89 1.987-2V6c-.007-1.113-.884-2.002-1.982-2.002H15zM7 4V2.5s-.004-.5.5-.5h5c.5 0 .5.5.5.5V4H7z"></path></g></svg></div><!-- react-text: 2239 -->互联网<!-- /react-text --></div>

								<div class="ProfileHeader-infoItem">
									<div class="ProfileHeader-iconWrapper"><svg viewBox="0 0 22 16" class="Icon Icon--education" width="16" height="16" aria-hidden="true" style="height: 16px; width: 16px;"><title></title><g><path d="M11 0L0 3.94v.588l4.153 2.73v5.166C4.158 12.758 7.028 16 11 16c3.972 0 6.808-3.116 6.85-3.576l.006-5.163 4.13-2.732.014-.586L11 0z"></path></g></svg></div><!-- react-text: 2245 -->斯坦福大学 (Stanford University)<!-- /react-text -->
									<div class="ProfileHeader-divider"></div><!-- react-text: 2247 -->我都不信<!-- /react-text --><div class="ProfileHeader-divider"></div>
									<div class="ProfileHeader-iconWrapper"><svg width="14" height="16" viewBox="0 0 14 14" class="Icon Icon--male" aria-hidden="true" style="height: 16px; width: 14px;"><title></title><g><path d="M3.025 10.64c-1.367-1.366-1.367-3.582 0-4.95 1.367-1.366 3.583-1.366 4.95 0 1.367 1.368 1.367 3.584 0 4.95-1.367 1.368-3.583 1.368-4.95 0zm10.122-9.368c-.002-.414-.34-.75-.753-.753L8.322 0c-.413-.002-.746.33-.744.744.002.413.338.75.75.752l2.128.313c-.95.953-1.832 1.828-1.832 1.828-2.14-1.482-5.104-1.27-7.013.64-2.147 2.147-2.147 5.63 0 7.777 2.15 2.148 5.63 2.148 7.78 0 1.908-1.91 2.12-4.873.636-7.016l1.842-1.82.303 2.116c.003.414.34.75.753.753.413.002.746-.332.744-.745l-.52-4.073z" fill-rule="evenodd"></path></g></svg></div></div></div>
				</span>
				</div>
				<div clas="ProfileHeader-contentFooter"></div> 
			</div> 
		</div>
	</div>
</div>

	
</template>

<script>
export default {
	data() {
		return {

		}
	}


}
</script>

<style scoped>
	.profile-header {
		height: 415px;
		margin-top: 14px;
		width: 1000px;

		background: #fff;
		border: 1px solid #e7eaf1;
		border-radius: 2px;
		box-shadow: 0 1px 3px rgba(0,37,55,.05);
		box-sizing: border-box;
		border-radius: 2px;
	}

	.user-cover {
	    height: 240px;
	    width: 100%;
	    position: relative;
	    overflow: hidden;
	    background: #f7f8fa; 
	    border-top-right-radius: 2px;
	    border-top-left-radius: 2px;
	    -webkit-transition: height .3s;
	    transition: height .3s;
	}

	.user-cover img {
		height: 100%;
		width: 100%;
		object-fit: cover;
	}

	.user-wrapper {
		position: relative;
    	width: 100%;
    	background: #fff;
    	box-sizing: border-box;
	}

	.profileHeader-main {
		margin-left: 20px;
		position: relative; 
    	box-sizing: border-box;

	} 

	.profileHeader-main:after {
		content: "";
		visibility: hidden;
		display: block;
		clear: both;
		height: 0px;
	}

	.avatar-box { 
		float: left;
		position: relative;
		top: -25px;
		width: 160px;
		height: 160px;
		background-repeat: no-repeat;
		background-size: cover;
		border-radius: 5px;
		border: 5px solid #fff;
	}

	.content-box {
		float: right; 
		margin-top: 20px;
		height: calc(100% - 20px); 
		width: calc(100% - 200px);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items:flex-start;
	}
	
	.ProfileHeader-name{
		font-size: 26px;
		font-weight: 500;
		line-height: 30px;
	}

	.ProfileHeader-headline{
		margin-left: 12px;
		font-size: 18px;
		white-space: nowrap;
	}


	.ProfileHeader-contentBody {
	    position: relative;
	    width: 524px;
	    overflow: hidden;
	    -webkit-transition: height .3s;
	    transition: height .3s;
	}

	.ProfileHeader-info {
	    font-size: 14px;
	    line-height: 20px;
	    box-sizing: border-box;
	}

	.ProfileHeader-contentHead {
		margin-bottom: 16px;
	}


	.ProfileHeader-infoItem:not(:last-child) {
	    margin-bottom: 10px;
	}

	.ProfileHeader-infoItem {
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}

	.ProfileHeader-iconWrapper {
	    display: inline-block;
	    width: 18px;
	    height: 18px;
	    margin-right: 12px;
	    text-align: center;
	}

	.Icon {
	    vertical-align: text-bottom;
	    fill: #9fadc7;
	}

	.ProfileHeader-divider {
	    display: inline-block;
	    width: 1px;
	    height: 10px;
	    margin: 0 8px;
	    background: #e7eaf1;
	}

	.UserCoverEditor-simpleEditButton {
	    position: absolute;
	    top: 24px;
	    right: 24px;
	    z-index: 1;
	}

	.DynamicColorButton--dark {
	    color: rgba(0,0,0,.6);
	    border-color: rgba(0,0,0,.12); 
	}

	.DynamicColorButton {
	    color: #ccd8e1;
	    -webkit-transition: color,border-color .3s;
	    transition: color,border-color .3s;
	}

	.DynamicColorButton svg {
	    fill: currentColor;
	}
	.Icon--left {
	    margin-right: 6px;
	}

	.Button {
		background-color: transparent;
	    display: inline-block;
	    padding: 0 16px;
	    font-size: 14px;
	    line-height: 34px;
	    color: #8590a6;
	    text-align: center;
	    cursor: pointer;
	    border: 1px solid #ccd8e1;
	    border-radius: 3px;
	    outline:none;
	}

	.Button:hover {
		background-color: rgba(0,0,0,.03);
	}
</style>